<template>
  <div class="imgBox">
            <img
              src="../assets/body.png"
              alt=""
              width="305"
              height="669"
              usemap="#Map"
              :class="old=='warehouse'?'bodyimg':''"
            />
            <map name="Map">
              <area
                shape="poly"
                coords="105,109,132,115,170,113,199,110,175,93,174,88,133,80"
                href="javascript:void(0);"
                @mouseenter="fn1('颈部')"
              />
              <area
                shape="poly"
                coords="202,113,207,194,219,217,222,236,253,309,262,363,294,370,302,340,274,305,249,206,239,147,219,115"
                href="javascript:void(0);"
                @mouseenter="fn1('上肢1')"
              />
              <area
                shape="poly"
                coords="88,113,96,197,86,217,81,242,50,312,43,366,19,373,6,363,4,340,30,307,57,204,69,149"
                href="javascript:void(0);"
                @mouseenter="fn1('上肢2')"
              />

              <area
                shape="poly"
                coords="103,249,97,274,117,286,128,286,132,273,150,272,156,275,168,273,182,278,178,290,198,291,207,292,206,268,206,257"
                href="javascript:void(0);"
                @mouseenter="fn1('腰部')"
              />
              <area
                shape="poly"
                coords="102,284,92,314,128,342,160,342,182,344,201,319,208,302,182,294,173,286,172,278,139,278"
                href="javascript:void(0);"
                @mouseenter="fn1('生殖部')"
              />
              <area
                shape="poly"
                coords="91,323,87,386,92,422,92,475,98,534,104,574,104,604,93,632,118,637,134,629,130,596,135,522,134,487,136,440,146,372,146,346"
                href="javascript:void(0);"
                @mouseenter="fn1('下肢1')"
              />
              <area
                shape="poly"
                coords="212,633,202,610,200,574,212,520,213,448,218,390,214,324,211,311,168,355,162,347,157,350,163,411,171,476,171,520,177,560,176,583,175,597,172,622,178,635"
                href="javascript:void(0);"
                @mouseenter="fn1('下肢2')"
              />
              <area
                shape="poly"
                coords="140,126,118,140,107,159,109,185,119,192,130,192,141,189,142,172,138,152,142,144,151,140,160,141,162,160,161,180,167,189,186,188,196,178,196,154,188,142,170,128,158,132,155,131,149,131,144,134"
                href="javascript:void(0);"
                @mouseenter="fn1('肺')"
              />
              <area
                shape="poly"
                coords="160,145,157,148,153,143,149,143,151,149,152,153,147,160,148,171,154,177,159,179,162,163"
                href="javascript:void(0);"
                @mouseenter="fn1('心脏')"
              />
              <area
                shape="poly"
                coords="115,238,112,214,115,204,131,196,147,196,163,197,174,204,164,215"
                href="javascript:void(0);"
                @mouseenter="fn1('肝')"
              />
              <area
                shape="poly"
                coords="186,191,176,198,176,204,183,212,189,226,187,240,165,252,148,250,142,240,140,236,136,240,139,247,141,252,131,249,131,242,133,233,146,227,157,228,164,227,164,219,174,206,170,199,170,195,174,189,180,187"
                href="javascript:void(0);"
                @mouseenter="fn1('胃')"
              />
              <area
                shape="poly"
                coords="179,205,185,200,191,201,196,206,196,220,196,228,190,236,188,217"
                href="javascript:void(0);"
                @mouseenter="fn1('胆')"
              />

              <area
                shape="poly"
                coords="147,129,162,128,174,128,182,137,192,144,197,164,196,181,189,188,204,191,204,172,205,144,203,120,197,114,164,116,130,117,115,113,105,112,90,114,90,138,95,162,97,192,103,195,120,195,135,195,156,193,161,190,156,181,148,175,148,156,147,146,141,151,142,162,141,173,144,180,141,189,128,193,114,190,107,177,107,156,116,139,129,132,138,129"
                href="javascript:void(0);"
                @mouseenter="fn1('胸部')"
              />
              <area
                shape="poly"
                coords="99,198,102,228,102,242,111,250,126,248,131,240,129,234,120,240,115,237,111,221,115,204,125,199"
                href="javascript:void(0);"
                @mouseenter="fn1('腹部')"
              />
              <area
                shape="poly"
                coords="174,292"
                href="javascript:void(0);"
                @mouseenter="fn1('胆')"
              />
              <area
                shape="poly"
                coords="206,253,204,241,206,221,208,201,200,193,190,191,189,198,196,205,195,227,189,241,169,254"
                href="javascript:void(0);"
                @mouseenter="fn1('腹部')"
              />
              <area
                shape="poly"
                coords="143,57,147,42,154,42,164,36,180,32,179,18,161,8,140,5,127,11,118,26,121,37,127,43,128,47"
                href="javascript:void(0);"
                @mouseenter="fn1('颅脑')"
              />
              <area
                shape="poly"
                coords="175,86,188,84,195,59,189,33,183,21,179,35,171,37,161,42,152,44,146,53,135,55,122,41,118,35,122,63,133,80"
                href="javascript:void(0);"
                @mouseenter="fn1('头部')"
              />
            </map>
            <div v-if="nowshow" id="kuang" :class="nowshow&&nowshow.className">
              <div><img :src="nowshow.state==1?require('../assets/dh.png'):require('../assets/dh2.png')" alt="" /></div>
              <div>
                <h4 @click="disSearch(nowshow.name)">{{ nowshow.name }}</h4>
                <p>
                  <span v-for="(item, value) in nowshow.item" :key="value"
                     @click="disSearch(item)">{{ item }}
                  </span>
                </p>
                <p v-if="nowshow.state==2"><span>查看更多<i class="el-icon-right"></i></span></p>
              </div>
            </div>
            <el-col :span="5">
                <span class="tips"
                  ><i class="el-icon-s-opportunity"></i
                  >鼠标移到人体某些部位<br />
                  可查看该部位的疾病分类</span
                >
              </el-col>
          </div>
</template>

<script>
export default {
  props:["old"],
data(){
  return {
    bodyList:{},
    nowshow: {}, //当前显示的疾病类别信息
  }
},
created() {
  
 this.$store.dispatch('home/getBody').then(res=>{
   this.bodyList = res;
     this.nowshow = this.bodyList.tou;
 })
    
  },
  methods: {
    fn1(ss) {
      switch (ss) {
        case "头部":
          this.nowshow = this.bodyList.tou;
          break;
          case "颈部":
          this.nowshow = this.bodyList.jin;
          break;
          case "胸部":
          this.nowshow = this.bodyList.xuong;
          break;
          case "腹部":
          this.nowshow = this.bodyList.fu;
          break;
          case "腰部":
          this.nowshow = this.bodyList.yao;
          break;
          case "生殖部":
          this.nowshow = this.bodyList.shengzhi;
          break;
          case "上肢1":
          this.nowshow = this.bodyList.shangzhi1;
          break;
          case "上肢2":
          this.nowshow = this.bodyList.shangzhi2;
          break;
          case "下肢1":
          this.nowshow = this.bodyList.xiazhi1;
          break;
           case "下肢2":
          this.nowshow = this.bodyList.xiazhi2;
          break;
            case "肝":
          this.nowshow = this.bodyList.gan;
          break;
          case "胆":
          this.nowshow = this.bodyList.dan;
          break;
          case "颅脑":
          this.nowshow = this.bodyList.lunao;
          break;
          case "胃":
          this.nowshow = this.bodyList.wei;
          break;
          case "心脏":
          this.nowshow = this.bodyList.xinzang;
          break;
           case "肺":
          this.nowshow = this.bodyList.fei;
          break;
      }
      
    },
    disSearch(data){
      if(this.$route.name!="Warehouse"){
        //点击查询
     this.$router.push({ name: "Warehouse", params: { input: data } })
      }else{
        this.$emit('search',data)
      }
    }
  },
}
</script>

<style lang="less" scoped>
@import url("../less/home.less");
@import url("../less/homeKuan.less");
.bodyimg{
    transform: translate(-40px);
  }
    .tips {
    position: absolute;
    right: 30px;
    bottom: 80px;
    font-size: 14px;
    text-align: left;
    display: inline-block;
    color: #9ba5bb;
    margin-left: 30px;
    i {
      color: #312a6d;
    }
  }
</style>